div[role=form] {
  label {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 10px;
    .warning {
        background: #e7518f;
        border-radius: .5em;
        bottom: 5em;
        color: white;
        display: block;
        right: -.9em;
        padding: 8px 10px;
        position: absolute;
        text-shadow: 0 1px 0 #000;
        white-space: nowrap;
        font-weight: normal;
        font-size: 12px;
        line-height: 8px;
        &:after {
          border: solid;
          border-color: #e7518f transparent;
          border-width: .5em .5em 0 .5em;
          top: 2em;
          content: "";
          display: block;
          right: 2em;
          position: absolute;
      }
    }
    ::-webkit-input-placeholder {
       line-height: 3.4em;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
       line-height: 3.4em;
    }

    :-ms-input-placeholder {
       line-height: 3.4em;
    }
    input {

       &[disabled] {
        background-color: transparent;
        cursor: default !important;
      }
      display: block;
      width: 100%;
      height: 34px;
      padding: 0 12px 0 17px;
      font-size: 14px;
      color: #555;
      background-color: #FFF;
      background-image: none;
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
      transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
      box-shadow: none;
      border-radius: 4px;
      width: 100%;
      font-size: 16px;
      font-weight: 200;
      height: 55px;
      margin: 0 auto;
    }
    input.has-error {
      border: 1px solid #E95B95;
      background-color: #FEEDED;
      box-shadow: none;
      &:focus {
        border-color: #E95B95;
        box-shadow: none;
        outline: none;
      }
    }
    input.is-valid {
      &:focus, &:active {
        border-color: #52C29E;
        box-shadow: none;
        outline: none;
      }
    }

  }
  .leftIcon() {
    z-index: 1;
    top: 19px;
    left: 15px;
  }

  input.icon-label-username,
  input.icon-label-password,
  input.icon-label-email {
    padding-left: 40px;
    line-height: 3.4em;
  }

  label.icon-label-username,
  label.icon-label-password,
  label.icon-label-email {
    position: relative;
  }

  input.hideLabel {
    padding-left: 17px;
  }

  label.hideLabel {
    &:before {
      visibility: hidden;
    }
  }

  .icon-label-username:before {
    .label(@fa-username);
    .leftIcon()
  }
  .icon-label-password:before {
    .label(@fa-password);
    .leftIcon()
  }
  .icon-label-email:before {
    .label(@fa-email);
    .leftIcon()
  }

  .icon-label-error:after {
    .label(@fa-warn);
    right: 10px;
    top: 19px;
    color: #e7518f;
  }
  .icon-label-valid {
    &:after {
      .label(@fa-check);
      right: 10px;
      top: 19px;
      color: #53C0A3;
    }
  }
}

.largeWrapper {
  height: 500px;
}

.smallWrapper {
  height: 140px;
}

@media (min-width : 451px) {
  .centerDiv {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 400px;
    height: 245px;
  }
}
